<template>
  <div class="page">
    <header>{{film.name}}</header>
    <div class="bg">
      <img :src="film.poster" alt="">
    </div>
    <div class="info">
      <h3>{{ film.name }}</h3>
      <p>{{ film.category }}</p>
      <p>{{ film.premiereAt }}</p>
      <p>{{ film.nation }} | {{ film.runtime }}分钟</p>
      <p ref="synopsis" :style="{height:synopsisHeight}" :class="['synopsis',{hide}]">{{ film.synopsis }}</p>
      <button @click="hide = !hide">{{hide?  '展开' :'收起'}}</button>
    </div>
    <div class="line"></div>
    <!-- 横滚演员图 -->

    <!-- 剧照 -->
     <div class="pics-item">
      <h3>剧照</h3>
      <div class="pics">
        <div class="pic" v-for="item in film.photos" :key="item" @click="showPic = true">
          <img :src="item" alt="">
        </div>
      </div>
     </div>
     <Bigmap :visible.sync="showPic" :list="film.photos || []"/>

  </div>
</template>

<script>
import axios from 'axios';
import Bigmap from '../components/Bigmap.vue';
export default {
  data() {
    return {
      film:[],
      hide:false,
      synopsisHeight:'auto',
      showPic:false
    }
  },
  created() {
    // console.log('当前路由信息',this.$route)
    // console.log('query参数',this.$route.query)
    // console.log('动态路由参数',this.$route.params)
    this.getMovieDetail(this.$route.params.id)
  },
  methods:{
    async getMovieDetail(id) {
        const res = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          filmId:id,
          k:5408174
        },
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.film.info'
        }
      })
      // console.log(res.data)
      this.film = res.data.data.film
      this.$nextTick(()=>{
        this.synopsisHeight = this.$refs.synopsis.clientHeight + 'px'   
        // console.log(this.synopsisHeight) 
        this.hide = true
      })
    }
  },
  components: {
    Bigmap
  }
}
</script>

<style lang="scss" scoped>
.page{
  height: 100vh;
  overflow: auto;
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    // background: #FFF;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
  }
  .bg{
    height: 210px;
    overflow: hidden;
    display: flex;
    align-items: center;
    img{
      width: 100%;
    }
  }
}
.info{
  padding: 20px;
  p{
    font-size: 13px;
    margin-top: 10px; 
    color: #797d82;
    line-height: 20px;
    overflow: hidden;
  }
  .synopsis{
    transition: 0.3s linear;
  }
  .hide{
    height: 40px!important;
  }
}
.line {
  height: 15px;
  background: #eee;
}
.pics {
  padding: 0 15px;
  display: flex;
  overflow-x: auto;
}
.pic{
  flex-shrink: 0;
  margin-right: 12px;
  width: 150px;
  height: 100px; 
  overflow: hidden;
  display: flex;
  align-items: center;
  img {
    width: 100%;
  }
}
</style>